{% extends "timeline/base.html" %}
{% load compress %}
{% load timeline_widget_tags %}

{% block title %}
  {{ tl.title }}
  - 时间线
{% endblock %}

{% block extra_header %}
{{block.super}}
<style type="text/css">
  .content hr {
    margin: 5px 0;
  }
  .content > h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    clear: both;
  }
  #timeline-embed {
    margin:0px !important;
    border:1px solid #CCC !important;
    padding:0px !important;
    -webkit-border-radius:0px !important;
    -moz-border-radius:0px !important;
    border-radius:0px !important;
    -moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
    -webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
    box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;
    width: 940px;
    height: 640px;
  }
  #id_content {
    width: 650px;
  }
  .avatar.thumbnail img {
    width: 36px;
    height: 36px;
  }
</style>
{% endblock %}

{% block sidebar %}
<div class="sidebar">
  {% if tl.tags.all %}
    <div class="sidelables" style="margin-bottom: 10px;">
      {% for o in tl.tags.all %}
        <a href="{% url timeline_tag o.name %}"> 
          {{ o }} 
        </a> 
      {% endfor %}
    </div>
  {% endif %}
  <div class="well" id="sb_tl_creater">
    <div class="user avatar thumbnail">
      <a href="{% url userena_profile_detail tl.created_by.username %}">
        <img src="{{ tl.created_by.profile.get_mugshot_url }}"/>
      </a>
    </div>
    <div class="info">
      <ul>
        <li><a href="{% url userena_profile_detail tl.created_by.username %}">{{ tl.created_by.profile }}</a></li>
        <li>创建于： {{ tl.created_on|date:"Y-m-d H:i"}}</li>
        <li>更新于： {{ tl.updated_on|date:"Y-m-d H:i"}}</li>
      </ul>
    </div>
  </div>
  <div class="well">
      <a class="btn" data-toggle="modal" href="#embedCodeModal">将时间线嵌入你的网站</a>
  </div>
  <div class="well">
    <h4>协作者</h4>
    <div class="sidelables">
      {% for o in collaborators %}
        <a href="{% url userena_profile_detail o.username %}"> 
          {{ o }}
        </a> 
      {% endfor %}
    </div>
    <div>
      <a class="btn" href="{% url userena_umessages_compose_to tl.created_by.username %}">申请加入</a>
    </div>
  </div>

  {% if auth_can_edit %}
    <div class="well">
      <h4>管理</h4>
      <ul>
        <li><a href="{% url timeline_edit tl.pk %}">编辑基础信息</a></li>
        <li><a href="{% url timeline_events tl.pk %}">编辑事件</a></li>
        {% if user == tl.created_by %}
        <li><a href="{% url timeline_edit_collaboration tl.pk %}">管理协作者</a></li>
        <li><a href="{% url timeline_delete tl.pk %}" 
              onclick="return confirm('您确定需要删除该时间线？删除后将无法恢复')">删除事件</a></li>
        {% endif %}
      </ul>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block container_top %}
<div id="container_top" style="padding-bottom: 20px;">
  <div class="sw">
    {% if auth_can_edit %}
      <a href="{% url timeline_edit tl.pk %}">编辑基础信息</a>
      <span>|</span>
      <a href="{% url timeline_events tl.pk %}">编辑事件</a>
      <span>|</span>
    {% else %}
      <a href="{% url timeline_events tl.pk %}">文字版</a>
      <span>|</span>
    {% endif %}
    <a href="{% url timeline_full_screen tl.pk %}">精简模式</a>
  </div>
  <ul class="sbreadcrumb">
    <li><a href="{% url idx %}">首页</a> <span class="divider">/</span></li>
    <li class="active">{{ tl.title }}</li>
  </ul>
  <div>
    <div id='timeline-embed'></div>
  </div>
</div>
{% endblock %}

{% block content %}
  <div class="content">

  <div>
    <div id="ckepop" style="float: right;">
      <span class="jiathis_txt">分享到：</span>
      <a class="jiathis_button_tsina"></a>
      <a class="jiathis_button_qzone"></a>
      <a class="jiathis_button_tqq"></a>
      <a class="jiathis_button_renren"></a>
      <a class="jiathis_button_kaixin001"></a>
      <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
      <a class="jiathis_counter_style"></a>
    </div>
    <script type="text/javascript" src="http://v2.jiathis.com/code_mini/jia.js" charset="utf-8"></script>
    <div>
      {{ tl.num_events }} 事件  |  {{ tl.num_views }} 浏览 |  {{ tl.num_replies }} 回复
    </div>
  </div>

    <hr/>
    <div>
      {{ tl.intro|md }}
    </div>
    <h3>评论</h3>
    <div class="comments" id="id_comments">
      {% for c in comments %}
        {% include "timeline/inc_comment.html" %}
      {% endfor %}
    </div>
    {% if user.is_authenticated %}
      <h3>发表评论</h3>
      <div>
        <form action="{% url timeline_postcomment_ tl.pk %}" method="post" id="comment_from">
          {% csrf_token %}
          <p>
            {{ form.content }}
          </p>
          <p style="clear:both;">
            <input type="submit" name="post" class="btn btn-primary" id="id_btn_submit" value="提交">
          </p>
        </form>
      </div>
    {% else %}
      <h3>
        您还未登录，请在<a href="{% url userena_signin %}">登录</a>后发表评论。
        如果您还没有帐号，请先<a href="{% url userena_signup %}">注册</a>。
      </h3>
    {% endif %}
  </div>

  <div class="modal hide" id="embedCodeModal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">x</button>
      <h3>获取嵌入代码</h3>
    </div>
    <div class="modal-body">
      <div class="input-prepend" style="margin-bottom: 8px">
        <strong style="margin-right: 20px">大小</strong>
        <span class="add-on">Width</span><input type="text" placeholder="900" value="900" id="embed-width" class="input-mini">
        <span class="add-on">Height</span><input type="text" placeholder="650" value="650" id="embed-height" class="input-mini">
      </div>
      <textarea style="width:520px; height:160px;" readonly="readonly" id="embed_code">
      </textarea>
    </div>
  </div>
{% endblock %}

{% block footer_ext %}
{{ block.super }}
{% compress js %}
<script type="text/javascript" src="{{ STATIC_URL }}ajax_validation/js/jquery-bootstrap-form.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}ajax_validation/js/jquery.djangoajaxform.js"></script>
{% endcompress %}
<script type='text/javascript'>
  var timeline_config = {
    width: "100%",
    height: "600px",
    css: '{{STATIC_URL}}Timeline/css/timeline.css',
    js: '{{STATIC_URL}}Timeline/js/timeline-min.js',
    source: '{% url timeline_events_json_ tl.pk %}',
    lang: 'zh-ch'
  }
  var embed_url = "http://{{ site.domain }}{% url timeline_embed tl.pk %}";
</script>
<script src="{{STATIC_URL}}Timeline/js/timeline-embed.js"></script>
<script type="text/javascript">
  $('#comment_from').djangoajaxform({
      onValidateSucc: function(data, form){
        if (data.valid) {
          $('#id_comments').append(data.html);
          $('#id_content').val('');
        }
      }
  });
  function genEmbedCode() {
    var w = $("#embed-width").val();
    var h = $("#embed-height").val();
    var url = embed_url + "?width=" + w +"&height=" + h;
    return "<iframe src='" + url + "' width='" + w + "' height='" + h +"' frameborder='0'></iframe>";
  }
  $("#embed_code").focus(function() {
    var $this = $(this);
    $this.select();
    $this.mouseup(function() {
      $this.unbind("mouseup");
      return false;
    });
  });
  $("#embed-width,#embed-height").change(function(){
    $('#embed_code').val(genEmbedCode());
  });
  $('#embedCodeModal').on('show', function () {
    $('#embed_code').val(genEmbedCode());
  })
</script>
{% endblock %}
